<template>
  <div class="child-box">
    <!-- 四个角的边框效果 -->
    <div class="border_corner border_corner_left_top"></div>
    <div class="border_corner border_corner_right_top"></div>
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  export default defineComponent({});
</script>
<style lang="less" scoped>
  .child-box {
    position: relative;
    .main {
      border: 1px solid #d1d1d13f;
      border-radius: 4px;
      width: 100%;
    }
    .border_corner {
      z-index: 2500;
      position: absolute;
      width: 10px;
      height: 10px;
      background: rgba(0, 0, 0, 0);
      border: 1px solid #67a8f5ff;
    }
    .border_corner_left_top {
      border-right: none;
      border-bottom: none;
      border-top-left-radius: 4px;
    }
    .border_corner_right_top {
      top: 0px;
      right: 0px;
      border-left: none;
      border-bottom: none;
      border-top-right-radius: 4px;
    }
    .border_corner_left_bottom {
      bottom: 0px;
      left: 0px;
      border-right: none;
      border-top: none;
      border-bottom-left-radius: 4px;
    }
    .border_corner_right_bottom {
      bottom: 0px;
      right: 0px;
      border-left: none;
      border-top: none;
      border-bottom-right-radius: 4px;
    }
  }
</style>
